<template>
  <div class="container">
    <div style="padding:10px">
      <el-button type="primary"
                 icon="el-icon-plus"
                 @click="createMethod">增加</el-button>
    </div>
    <div style="padding:10px"
         v-for="(item,index) in trueList"
         :key="index">
      <el-row :gutter="20">
        <el-col :span="3">
          <div class="list-title">字段名称:</div>
        </el-col>
        <el-col :span="8">
          <el-input v-model="item.name"
                    placeholder="请输入名称"></el-input>
        </el-col>
        <el-col :span="3">
          <div class="list-title">字段类型:</div>
        </el-col>
        <el-col :span="8">
          <el-select v-model="item.type"
                     placeholder="请选择表单类型">
            <el-option v-for="item in types"
                       :key="item"
                       :label="item"
                       :value="item"></el-option>
          </el-select>
        </el-col>
        <!-- <el-col :span="3">输入值长度</el-col>
                <el-col :span="3">
                    <el-input v-model="item.maxLength" placeholder="请输入输入值长度"></el-input>
                </el-col>-->
        <!-- <el-col :span="3">是否必填项</el-col>
                <el-col :span="3">
                    <el-switch
                        v-model="item.mustType"
                        active-color="#409EFF"
                        inactive-color="#888888"
                    ></el-switch>
                </el-col>-->
        <!-- <el-col :span="10">
                    <el-input v-model="item.select" placeholder="请输入名称"></el-input>
                </el-col>-->
        <el-col :span="2"
                style="display:flex;">
          <el-button type="danger"
                     icon="el-icon-delete"
                     circle
                     @click="delMethod(index)"
                     style="margin:auto;"></el-button>
        </el-col>
      </el-row>
      <!-- <p style="padding:10px 0;font-size:12px;color:darkred">多选字段请用英文逗号分隔</p> -->
    </div>
    <!-- <div style="padding:10px">
            <el-button type="primary" @click="addMethod">保存字段</el-button>
        </div>-->
    <div class="footer">
      <el-button @click="cancelDialog">取 消</el-button>
      <el-button type="primary"
                 @click="defineForm">确 定</el-button>
    </div>
  </div>
</template>

<script>
import api from '@/api/index';

export default {
  name: 'customerForm',
  props: ['formContent', 'flag'],
  data () {
    return {
      adminId: '',
      trueList: [],
      types: ['input', 'textarea'],//['input', 'select', 'radio', 'checkbox', 'textArea']
      // formList: [
      //   { name: '', type: '' }
      // ]//{ name: '', type: '', maxLength: '', mustType: false, select: '', values: '' }
    }
  },
  watch: {
    formContent: function (newVal, oldVal) {
      // console.log("newVal", "oldVal")
      // console.log(newVal, oldVal)
      this.trueList = JSON.parse(JSON.stringify(newVal));
      this.initialList = JSON.parse(JSON.stringify(newVal));
      console.log(this.trueList)
      console.log(this.initialList)
    },
    flag: function (newVal, oldVal) {
      // console.log("newVal", "oldVal")
      // console.log(newVal, oldVal)
      if (!newVal) {
        this.trueList = JSON.parse(JSON.stringify(this.initialList))
        console.log(this.trueList)
      }
    },
  },
  mounted () {
    console.log(this.flag)
    // console.log("mounted")
    // console.log(this.formContent)
    this.trueList = JSON.parse(JSON.stringify(this.formContent))
    // console.log(this.trueList)
    // var receiveForm = []
    // for (var i = 0; i < this.trueList.length; i++) {
    //   receiveForm.push({ receiveName: this.trueList[i].name, receiveType: this.trueList[i].type })
    // }
    // this.formList = receiveForm
  },
  methods: {
    //取消按钮
    cancelDialog () {
      this.trueList = JSON.parse(JSON.stringify(this.formContent))
      this.$emit('cancelBtn')
    },
    //确认按钮
    defineForm () {
      for (var i = 0; i < this.trueList.length; i++) {
        if (this.trueList[i].name == "") {
          this.$message({
            type: 'error',
            message: '请填写字段名称'
          });
          return false
        }
        if (this.trueList[i].type == "") {
          this.$message({
            type: 'error',
            message: '请填写字段类型'
          });
          return false
        }
      }
      // console.log(this.trueList)
      this.$emit('confirmBtn', this.trueList)
    },

    // initAjaxMethod(){
    //     const loading = this.$loading({text: '加载中...'});
    //     this.$http.post(api.ADD_COMPANY_DETAIL,{})
    //         .then((res)=>{
    //             loading.close();
    //             console.log('万能表单列表',res)
    //             if(res.code == 1){
    //                 if(res.data && res.data.content){
    //                     this.formList=JSON.parse(res.data.content);
    //                     this.adminId=res.data.id;
    //                 }
    //             }else{
    //                 this.$message.error(res.msg);
    //             }
    //         })
    //         .catch((err)=>{
    //             this.$message.error(err.msg);
    //         })
    // },
    //删除数据
    delMethod (index) {
      this.trueList.splice(index, 1)
    },
    //增加数据
    createMethod () {
      console.log(this.trueList)
      this.trueList.push({ name: '', type: '', values: '' })
    },
    // addMethod () {
    //   const loading = this.$loading({ text: '保存中...' });
    //   this.$http.post(api.ADD_COMPANY_SET, { content: JSON.stringify(this.formList), id: this.adminId })
    //     .then((res) => {
    //       loading.close();
    //       if (res.code == 1) {
    //         this.$message.success('保存成功');
    //       } else {
    //         this.$message.error(res.msg);
    //       }
    //     })
    //     .catch((err) => {
    //       this.$message.error(err.msg);
    //     })
    // }
  },
  computed: {}
}
</script>

<style scoped>
.list-title {
    height: 32px; 
    display: flex;
    align-items: center;
}
.footer {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    margin-top: 40px;
}
</style>
